<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <!-- ElementUI 的样式 css -->
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <!-- ElementUI 的 js -->
    <script src="js/index.js"></script>
    <!-- axios 的 js，用于发送 AJAX请求 -->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        /*.header-container .el-select {
            margin-left: 15px;
        }*/

        /* 顶部栏内部的搜索输入框、搜索按钮、类型下拉菜单元素的 左右间距 */
        /*.header-container input, .header-container button {
            margin-right: 20px;
        }*/

        /* 搜索按钮 */
        .header-container button {
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 15px;
            margin-right: 0;
        }

        /* 顶部栏 */
        .el-header {
            /*background-color: #B3C0D1;*/
            background: #FAFAFA;
            color: #333;
            text-align: left;
            line-height: 60px;
            margin-left: 5%;
            margin-right: 5%;
            margin-bottom: 10px;
            border-radius: 6px;
        }

        /* a标签，标题链接 */
        .el-table .cell a {
            line-height: 23px;
            font-size: 14px;
            color: #505256;
            text-decoration: none;
        }
        .el-table .cell a:hover {
            text-decoration: underline;
            color: #003399;
        }

        /* 修改表格行高度 */
        .el-table th, .el-table td, .el-table tr {
            padding: 0 !important;
            height: 40px;
            line-height: 40px;
        }

        /* 下拉菜单显示上下高度太短问题 */
        .el-select-dropdown .el-select-dropdown__wrap {
            max-height: 480px;
        }

        /* 页码居中显示，并且加上边距margin，和上边的列表数据留出间距 */
        /*#page-bar {*/
            /*!*margin: 20px 10% 0 auto;*!*/
            /*margin-top: 20px;*/
            /*margin-right: 10%;*/
            /*margin-left: auto;*/
        /*}*/

        /*#page-bar ul, #page-bar button {*/
            /*display: inline-block;*/
        /*}*/
        #page-bar {
            /*width: auto;*/
            margin-top: 20px;
            padding-right: 10%;
            text-align: right;
        }
        /*#page-bar:first-child {
            margin-left: auto;
        }*/

        #typeInfo {
            padding-left: 10%;
            padding-right: 10%;
            padding-top: 20px;
        }
        #typeInfo a {
            padding: 10px;
            font-size: 18px;
            color: #003366;
            box-sizing: border-box;
            border-radius: 5px;
            border: 1px solid #ffcc00;
        }
        #typeInfo a:hover {
            text-decoration: none;
            background-color: #000099;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-container class="header-container">
                <el-input v-model="pageBeanTableData.searchWords" placeholder="请输入内容"></el-input>
                <el-button round class="search-button" @click="clickSearchStart">搜索</el-button>
                <el-button round class="search-button" @click="showAllNotes">显示全部</el-button>

                <!--<el-select v-model="pageBeanTableData.currSelectedTypeId" placeholder="请选择" @change="searchStart">-->
                <!--<el-option v-for="item in type_options" :key="item.id" :value="item.id" :label="item.tName"></el-option>-->
                <!--</el-select>-->
                <el-button round type="info" class="search-button" @click="changeTypeAndList" v-text="'当前类别：' + currentType.tName"></el-button>
            </el-container>
        </el-header>
        <div v-if="listOrType != 0">

            <el-table border :data="pageBeanTableData.dataList" style="width: 90%;margin-left: 5%; margin-right: 5%; box-sizing: border-box" class="data-table" stripe>
                <!--<el-table-column label="歌名" show-overflow-tooltip resizable min-width="30%">-->
                    <!--<template slot-scope="scope">-->
                        <!--<a :href="'notes_data/' + scope.row.nType.dir + '/' + scope.row.dir + '.html'" target="_blank">{{scope.row.nName}}</a>-->
                    <!--</template>-->
                <!--</el-table-column>-->

                <el-table-column prop="name" label="歌名" show-overflow-tooltip resizable min-width="30%"></el-table-column>

                <!--<el-table-column label="绝对路径" show-overflow-tooltip resizable min-width="40%">-->
                    <!--<template slot-scope="scope">-->
                        <!--<span>{{scope.row.absolutePath}}</span>-->
                    <!--</el-table-column>-->
                <!--</el-table-column>-->
                <el-table-column prop="absolutePath" label="绝对路径" show-overflow-tooltip resizable min-width="40%"></el-table-column>
                <el-table-column prop="type" label="分类" show-overflow-tooltip resizable min-width="15%"></el-table-column>
                <!--<el-table-column prop="dir" label="路径前缀"></el-table-column>-->
                <el-table-column prop="createTime" label="录入时间" show-overflow-tooltip resizable min-width="15%"></el-table-column>

            </el-table>

            <!-- 分页信息 -->
            <el-pagination background layout="prev, pager, next"
                           :hide-on-single-page="true"
                           :total="pageBeanTableData.totalCount"
                           :page-size="pageBeanTableData.pageSize"
                           @current-change="handleCurrentChange"
                           :page-count="pageBeanTableData.totalPage"
                           id="page-bar">
            </el-pagination>

        </div>
        <div v-else id="typeInfo">
            <el-link type="primary" v-for="item in type_options" :key="item.id" @click="changeType(item)">{{item.tName}}</el-link>
        </div>
    </el-container>
</div>



<script>
    var containerParentVue = new Vue({
        el:'#app',
        data:{
            pageBeanTableData: {
                currentPage: 1,
                pageSize: 10,
                totalCount: 0,
                // currSelectedTypeId: 0, //目前下拉菜单选中（绑定）的类型id
                searchWords: "",  //搜索框内的数据
                dataList:[]
            },

            //下拉菜单（用于分类）
            type_options: [{
                id: 0,
                dir: '',
                tName: '全部'
            }],
            //显示分类信息，还是显示列表信息（0 分类   非0 列表）
            listOrType: 1,
            currentType: {
                id: 0,
                dir: '',
                tName: '全部'
            }
        },
        methods: {
            //切换页码
            handleCurrentChange(currentPage) {
                //设置最新的页码
                this.pageBeanTableData.currentPage = currentPage;
                //加载数据，实现翻页
                this.loadNotesData();

                //alert(currentPage);
                //重新调用findPage方法进行分页查询
                //this.findPage();
            },
            //点击搜索
            clickSearchStart(){
                this.searchStart();
            },
            //切换类别 type 选项 用此方法，点击搜索时，也会调用此方法
            searchStart(){
                //先把页码置为第一页
                this.pageBeanTableData.currentPage = 1;
                //然后加载数据
                this.loadNotesData();
                //显示列表页面
                this.listOrType = 1;
            },
            //显示全部
            showAllNotes(){
                console.log('showAllNotes');
                //先把页码置为第一页
                this.pageBeanTableData.currentPage = 1;
                //搜索关键词置为 空
                this.pageBeanTableData.searchWords = '';
                //类别置为空（表示全部）
                this.pageBeanTableData.currSelectedTypeId = null;
                //改变当前类别数据
                // this.currentType = {
                //     id: 0,
                //     dir: '',
                //     tName: '全部'
                // };
                //显示列表页面
                this.listOrType = 1;

                //加载数据
                this.loadNotesData();
            },
            //加载数据（加载列表数据）
            //发送 AJAX请求，接收 笔记列表 数据
            loadNotesData(){
                // axios.get("/my-music/page", {
                //     currentPage: this.pageBeanTableData.currentPage,
                //     pageSize: this.pageBeanTableData.pageSize,
                //     currSelectedTypeId: this.pageBeanTableData.currSelectedTypeId,
                //     searchWords: this.pageBeanTableData.searchWords
                // }).then(res=>{
                //     if(res.data.code == 200) {
                //         //查询成功，将数据给tableData
                //         this.pageBeanTableData = res.data.data;
                //     } else {
                //         //查询列表信息失败
                //         this.$message.error(res.data.message);
                //     }
                // });
                axios({
                    method: "get",
                    url: "/my-music/page",
                    params: {
                        currentPage: this.pageBeanTableData.currentPage,
                        pageSize: this.pageBeanTableData.pageSize,
                        currSelectedTypeId: this.pageBeanTableData.currSelectedTypeId,
                        searchWords: this.pageBeanTableData.searchWords
                    }
                }).then(res=>{
                    if(res.data.code == 200) {
                        //查询成功，将数据给tableData
                        this.pageBeanTableData = res.data.data;
                    } else {
                        //查询列表信息失败
                        this.$message.error(res.data.message);
                    }
                })
            },


            //加载类别信息
            loadTypeData(){
                //发送 AJAX请求，接收 类别 数据
                axios.post("type/selectAllType").then(res=>{
                    if(res.data.flag) {
                        //查询成功
                        this.type_options = res.data.data;
                    }else {
                        //查询失败
                        this.$message.error(res.data.message);
                    }
                });
            },
            //切换分类和数据列表界面
            changeTypeAndList(){
                if(this.listOrType != 0) {
                    this.listOrType = 0;
                } else {
                    this.listOrType = 1;
                }
            },
            //切换类别
            changeType(cType) {
                //console.log(cType);
                this.pageBeanTableData.currSelectedTypeId = cType.id;
                this.currentType = cType;
                this.searchStart();
            }
        },
        // 初始化
        mounted() {
            //发送 AJAX请求，接收 笔记列表 数据
            this.loadNotesData();
            // this.loadTypeData();


        }
    });

</script>
</body>
</html>